<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="pl">  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">


        <title>Jumbotron Template for Bootstrap</title>

        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        
       
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      
        <link href="bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
        <link href="bootstrap/css/bootstrap-select.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="bootstrap/css/jumbotron.css" rel="stylesheet">
        <link href="bootstrap/css/custombootstrap.css" rel="stylesheet">
        
        <style type="text/css">
            #inner {
                display: table;
                margin: 0 auto;
            }
        </style>


        <script type="text/javascript">
            $(window).on('load', function() {

                $('.selectpicker').selectpicker();

                // $('.selectpicker').selectpicker('hide');
            });
        </script>
     
    </head>

    <body>


        <div class="navbar-inverse navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand " href="#">Petro-Oil</a>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Koszyk <span class="badgeEx ">2</span>
                        </button>
                    </div>
                    <span> </span>
                    <div class="form-group">
                        <ul class="nav navbar-nav">

                            <li><a href="#about">Rejestracja</a></li>

                        </ul>
                        <a class="navbar-brand" href="#"></a>
                    </div>
                    <span> </span>
                    <div class="form-group">
                        <input type="text" placeholder="Email" class="form-control">
                    </div>
                    <span> </span>
                    <div class="form-group">
                        <input type="password" placeholder="Password" class="form-control">
                    </div>
                    <span> </span>
                    <button type="submit" class="btn btn-success">Logowanie</button>
                </form>

            </div> </div>








        <!-- Main jumbotron for a primary marketing message or call to action <div class="container theme-showcase">-->

        <br>



        <div class="container ">
            <div class="col-lg-12">
                <div class="row">


                    <div class="col-lg-3">





                        <div class="list-group">
                            <a href="#" class="list-group-item active">Menu</a>
                            <a href="#" class="list-group-item">Monitory</a>
                            <a href="#" class="list-group-item">Komputery</a>
                            <a href="#" class="list-group-item">Myszki</a>
                            <a href="#" class="list-group-item">Klawiatury</a>
                            <a href="#" class="list-group-item">Głosniki</a>
                            <a href="#" class="list-group-item">Dyski</a>
                            <a href="#" class="list-group-item">Pamięć</a>
                            <a href="#" class="list-group-item">Drukarki</a>
                            <a href="#" class="list-group-item">Akcesoria</a>
                        </div>

                        <div class="col-lg-3">

                        </div>
                        <div class="list-group">
                            <select class="selectpicker " title="Kategoria" data-style="btn-success" data-width="254px">
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Relish</option>
                            </select>

                            <select class="selectpicker" title="Producent" data-style="btn-success" data-width="254px">
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Relish</option>
                            </select>

                            <select class="selectpicker" title="Producent" data-style="btn-success" data-width="254px">
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Relish</option>
                            </select>

                            <button type="submit" class="btn btn-primary pull-right">Szukaj</button>







                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="panel panel-success">

                            <div class="panel-heading">
                                <h3 class="panel-title">Panel title</h3>
                            </div>
                            <div class="panel-body">

                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px; " src="">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div>
                                </div>




                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px; " src="">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div></div>
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px; " src="">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div></div>
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px; " src="">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div></div>
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px; " src="">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

                                    </div></div>
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px; " src="">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div>
                                </div>
                                <br>
                                <ul id="inner" class="pagination">
                                    <li><a href="#">&laquo;</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>

                            </div>
                        </div>

                    </div>
                </div>  
            </div>

        </div>

        <jsp:include page="./util/footer.jsp"/>


        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="bootstrap/js/bootstrap-select.js"></script>
        <script src="bootstrap/js/bootstrap-select.min.js"></script>


    </body>
</html>
